<template>
  <el-container class="login-container">
    <el-main>
      <el-card class="login-card" shadow="always">
        <el-form label-position="right" label-width="80px">
          <el-form-item label="用户名">
            <el-input :prefix-icon="User" v-model="loginForm.username" clearable autofocus/>
          </el-form-item>
          <el-form-item label="密码">
            <el-input :prefix-icon="Key" v-model="loginForm.password" type="password" clearable />
          </el-form-item>
          <el-form-item>
            <el-button @click="registerDialogShow = true">
              <span  style="color:black;">Create</span>
            </el-button>
            <el-button type="primary" @click="handleLogin()">
              <span  style="color:aliceblue;">Link-Start</span>
            </el-button>
          </el-form-item>
          <div style="clear: both;"></div>
        </el-form>
        <template #footer>
          <span  style="color:aquamarine;">战争雷霆-Ciallo～(∠・ω< )⌒★</span>
        </template>
      </el-card>
    </el-main>
  </el-container>
  <el-dialog v-model="registerDialogShow" title="注册">
     <Register @register="handleDialogClose()" />
    <template #footer>
      已有账号，前往 <el-button size="small" type="primary" 
      @click="handleDialogClose()">登录</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ref } from 'vue';
  import Register from './Register.vue';
  import { User, Key } from '@element-plus/icons-vue'
  import { postLogin } from '@/api/userApi';
  import { ElMessage } from 'element-plus';
  import { useRouter } from 'vue-router';
  import { useUsernameStore } from '@/store/usernameStore';

  const registerDialogShow = ref(false)
  const handleDialogClose = () => {
    registerDialogShow.value = false
  }

  const usernameStore = useUsernameStore()

  const loginForm = ref({
    username: '',
    password: ''
  })

  const router = useRouter()
  
  const handleLogin = () => {
    postLogin(loginForm.value).then(response => {
      console.log(response)
      if (response.status == 400) {
        ElMessage.error('False!!!')
      }
      if (response.status == 200) {
        ElMessage.success('Link-Start！')
        // 登录成功，补充用户名
        usernameStore.username = loginForm.value.username
        router.push({ name: 'home' })
      }
    }).catch(error => {
      console.log(error)
    })
  }
        

</script>

<style>
  .el-card__footer {
    text-align: right;
    font-size: 12px;
  }

.login-container {
  min-height: 84vh;
  /* background-image: url('https://jw.qvtu.edu.cn/css/images/login_icon.png'); */
  background-image: url('../../img/b1.jpg');
  background-repeat: no-repeat;
  background-position: top 30% left 30%;
  position: relative;
  opacity: 0.75;
}

 .login-card {
  position: absolute;
  top: 30%;
  right: 10%;
  background-color: rgba(255, 255, 255, 0.5); 
}

</style>
